<template>
  <div>
    <h3>排房（增加）</h3>
    <table class="table table-bordered">
      <tbody>
        <tr>
          <td align="right">房型</td>
          <td>
            <select v-model="info.houseTypeId" @change="selectHouseNo">
              <option value="">请选择</option>
              <option :value="item.id" v-for="item in data1.list">
                {{ item.houseTypeName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">房号</td>
          <td>
            <select v-model="info.houseNoId">
              <option value="">请选择</option>
              <option :value="item.id" v-for="item in data2.list">
                {{ item.houseNoName }}
              </option>
            </select>
          </td>
        </tr>
        <tr>
          <td align="right">姓名</td>
          <td>
            <input type="text" v-model="info.userName" />
          </td>
        </tr>
        <tr>
          <td align="right">手机号</td>
          <td>
            <input type="text" maxlength="11" v-model="info.tel" />
          </td>
        </tr>
        <tr>
          <td align="right">身份证</td>
          <td>
            <input type="text" maxlength="18" v-model="info.card" />
          </td>
        </tr>
        <tr>
          <td align="right">入住时间</td>
          <td>
            <input type="date" v-model="info.inTime" />
          </td>
        </tr>
        <tr>
          <td align="right">离店时间</td>
          <td>
            <input type="date" v-model="info.outTime" />
          </td>
        </tr>
        <tr>
          <td align="right"></td>
          <td>
            <input
              type="button"
              value="增加"
              class="btn btn-primary"
              @click="ok"
            />
          </td>
        </tr>
      </tbody>
    </table>
    {{ info }}
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import moment from 'moment';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
//排房增加时
let info: any = reactive({
  tel: '',
  card: '',
  userName: '',
  houseTypeId: '',
  houseNoId: '',
  inTime: '',
  outTime: '',
});

//获取房型传递的参数
let info1: any = reactive({
  pageIndex: 1,
  pageSize: 20,
  houseTpyeName: '',
  area1: '',
  area2: '',
});
//返回的房型数据
let data1: any = reactive({
  list: [],
  totalCount: 0,
  totalPage: 0,
});

//获取房号列表向后端传递的参数
let info2: any = reactive({
  pageIndex: 1,
  pageSize: 100,
  houseNoName: '',
  houseTypeId: '',
  houseState: 1,
});

//声明变量存储后端返回的数据
let data2: any = reactive({
  list: [],
  totalCount: 0,
  totalPage: 0,
});

onMounted(() => {
  getHouseTypeList();
  //getHouseNoList();  房号什么时候加载  选择房型时加载房号
});

//增加排房
const ok = () => {
  //1.判断有效性
  if (new Date(info.inTime) < new Date()) {
    alert('入住时间不能小于当前时间');
    return;
  }
  if (new Date(info.outTime) < new Date(info.inTime)) {
    alert('离店时间不能小于入住时间');
    return;
  }
  //2.发送请求
  axios({
    url: '/api/HouseTypes/AddHouseRow',
    method: 'post',
    data: info,
  })
    .then((res) => {
      console.log(res);
    })
    .catch((err) => {
      console.log(err);
    });
};

//选择房型显示房号
const selectHouseNo = () => {
  info.houseNoId = '';
  info2.houseTypeId = info.houseTypeId;
  //根据房型查询
  getHouseNoList();
};

//获取房型列表
const getHouseTypeList = () => {
  axios({
    url: '/api/HouseTypes/GetHouseTypeList',
    method: 'get',
    params: info1,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data1, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};

//获取房号列表

const getHouseNoList = () => {
  axios({
    url: '/api/HouseTypes/GetHouseNoList',
    method: 'get',
    params: info2,
  })
    .then((res) => {
      console.log(res);
      Object.assign(data2, res.data);
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
